<template>
  <div class="register">
    <center>
      <h3>京东注册</h3>
      <hr />
      <van-form @submit="onSubmit">
        <van-field
          v-model="username"
          name="userName"
          label="用户名"
          placeholder="请输入手机号"
          :rules="[{ required: true, message: '请填写账号' }]"
        />
        <br />
        <van-field
          v-model="password"
          type="password"
          name="password"
          label="密码"
          placeholder="请输入密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px;">
          <br /><br />
          <van-button class="btn" round block type="info" native-type="submit"
            >提交</van-button
          >
        </div>
        <br />
      </van-form>
    </center>
    <span
      ><h4 @click="del()">账号密码登录</h4>
      <h4 class="zh" @click="ben()">手机快速登录</h4></span
    >
    <center>
      <h5>
        ------------------其他登录方式------------------
      </h5>
      <div class="odiv">
        <div>
          <img src="../img/qq.png" alt="" />
          <p>qq登录</p>
        </div>
        <div>
          <img src="../img/wx.png" alt="" />
          <p>微信登录</p>
        </div>
        <div>
          <img src="../img/ios.png" alt="" />
          <p>ios登录</p>
        </div>
      </div>
      <br />
      <span class="spa">
        <input class="tex" type="checkbox" />登录即代表您已同意</span
      >
    </center>
  </div>
</template>

<script>
import { reqRegisterAPI } from "../api/user";
import { Toast } from "vant"; //弹出框引入
import { Dialog } from "vant";
export default {
  components: {},
  data() {
    return {
      username: "", //用户名
      password: "", //密码
    };
  },
  computed: {},
  watch: {},

  methods: {
    // 跳转登录页面
    del() {
      Toast("使用账号登录");
      this.$router.push("/Zanghao");
    },
    // 跳转手机登录
    ben() {
      Toast("使用手机登录");
      this.$router.push("/Denglu");

      // 弹出框
      Dialog.confirm({
        title: "注册协议及隐私政策",
        message:
          "请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体并下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）：",
      })
        .then(() => {
          // on confirm
        })
        .catch(() => {
          // on cancel
          this.$router.push("/Register"); //路由跳转
        });
    },
    // 注册验证
    async onSubmit(values) {
      console.log("submit", values);
      var zhuce = await reqRegisterAPI({ ...values });
      console.log(zhuce);
      if (zhuce.code === "success") {
        Toast("注册成功");
        this.$router.push("/Zanghao");
      } else {
        Toast.fail("注册失败");
      }
    },
  },
  created() {},
  mounted() {},
};
</script>
<style scoped>
.btn {
  background-color: #fab3b3;
  height: 50px;
  font-size: 16px;
}
span {
  display: block;
  display: flex;
  justify-content: space-around;
}
img {
  widows: 50px;
  height: 50px;
  border-radius: 50px;
}
.odiv {
  display: flex;
  justify-content: space-around;
}
p {
  color: #cacaca;
}
.spa {
  font-size: 12px;
  color: #cacaca;
}
.zh {
  color: #cacaca;
}
h3 {
  font-weight: 400;
}
h5 {
  color: #cacaca;
}
.spa {
  display: block;
  background-color: rgb(252, 252, 252);
}
</style>
